<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="com.pmsco.pms.core.constant.PmsConstant"%>
<%@ page import="com.pmsco.pms.util.BundleUtil"%>
<%@ include file="/WEB-INF/import/tagLibs.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script>
	    $(function() {
	    	var h = $(userMainTable).height();
	        $("#tabs").tabs();
	        $("#tabs").css('height', h);
	        $("button").button();
	        
	        //ajax for tab
	        $("#accountli").click(function() {
	        	loadAccountData();
	        });
	    });
	    
	    function loadAccountData() {
	    	$.getJSON('<%=PmsConstant.accountInformation_JspUrl%>', function(accountInformation) {
	    		$("#userId").val(accountInformation.loggedUser.id);
	    		$("#userName").val(accountInformation.loggedUser.userName);
	    		$("#lastName").val(accountInformation.loggedUser.lastName);
	    		$("#midName").val(accountInformation.loggedUser.midName);
	    		$("#firstName").val(accountInformation.loggedUser.firstName);
	    		$("#idNumber").val(accountInformation.loggedUser.idNumber);
	    		$("#dob").val(accountInformation.loggedUser.dob);
	    		$("#cellPhone").val(accountInformation.loggedUser.cellPhone);
	    		$("#homePhone").val(accountInformation.loggedUser.homePhone);
	    		$("#homeAddr").val(accountInformation.loggedUser.homeAddr);
	    		$("#emailAddr").val(accountInformation.loggedUser.emailAddr);
        	});
	    }
	    
	    function submitAccountInformation() {
	    	var name = $("#userName").val();
	    	var userLastName = $("#lastName").val();
	    	var userMidName = $("#midName").val();
	    	var userFirstName = $("#firstName").val();
	    	var userIdNumber = $("#idNumber").val();
	    	var userDob = $("#dob").val();
	    	var userCellPhone = $("#cellPhone").val();
	    	var userHomePhone = $("#homePhone").val();
	    	var userHomeAddr = $("#homeAddr").val();
	    	var pmsUser = {
    			userName : name,
    			lastName : userLastName,
    			midName : userMidName,
    			firstName : userFirstName,
    			idNumber : userIdNumber,
    			dob : userDob,
    			cellPhone : userCellPhone,
    			homePhone : userHomePhone,
    			homeAddr : userHomeAddr
	    	};
	    	$.getJSON('<%=PmsConstant.saveAccountInformation_JspUrl%>', pmsUser, function(data) {
	    		alert(data.message);
	    	});
	    	return false;
	    }
    </script>
</head>
<body class="pmsMainBody">
	<table class="pmsMainTable">
		<tr class="pmsMainTableWrapperTd">
			<td class="pmsFullTableTd">
			    <table class="tableForm pmsFullTable" cellpadding="0" cellspacing="0" id="userMainTable">
			    	<tr>
			    		<td height="100%">
			    			<div id="tabs">
							    <ul>
							        <li><a id="accountli" href="#account">Account</a></li>
							        <li><a href="#message">Messages</a></li>
							        <li><a href="#task">Task</a></li>
							    </ul>
							    <div id="account" style="height: 100%">
							    	<%@ include file="/WEB-INF/views/accountInformation.jsp" %>	
							    </div>
							    <div id="message" style="height: 100%">
							    	<p>Test</p>
							    </div>
							    <div id="task" style="height: 100%"></div>
						    </div>
					    </td>
			    	</tr>	
				</table>
			</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	loadAccountData();
</script>
</html>